<template>
  <div class="permission-index" ref="permisssTab" id="permission-index">
    <div class="channelName">
      <span class="user-l">当前栏目：</span
      >{{ query.channelName }}
    </div>
    <a-tabs v-model:activeKey="tabActive" @change="changeTopTabs">
      <a-tab-pane key="1" tab="组织分配"> </a-tab-pane>
      <a-tab-pane key="2" tab="用户分配"> </a-tab-pane>
    </a-tabs>
    <div class="section-tab" v-if="tabActive == 1">
      <!-- 站点权限表格展示部分 -->
      <virtualTable :columns="orgColumns" :dataSource="orgTreeTable" ref="orgTable" :isAssignable="isAssignable"
        :height="height">
      </virtualTable>
    </div>
    <div class="section-tab user-tab" v-if="tabActive == 2">
      <div class="userPermSeach">
        <a-select v-model:value="sectionValue" placeholder="请选择"
          :options="orgList.map((item: any) => ({ value: item.id, label: item.name }))" @change="handleChange"></a-select>
        <div class="searchContent">
          <a-input v-model:value="userName" @pressEnter="getUserPower" placeholder="搜索用户名" allowClear style="width: 192px">
            <template #suffix>
              <i class="iconfont icon-search" style="cursor: pointer;" @click="getUserPower"></i>
            </template>
          </a-input>
        </div>
      </div>

      <!-- 栏目权限表格展示部分 -->
      <permissionTable :columns="userColumns" :dataSource="userTreeTable.records" ref="userTable"
        :isAssignable="isAssignable" :isShowPagination="isShowPagination" :total="userTreeTable.total" :scroll="scroll"
        @changePage="changePage">
      </permissionTable>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, onMounted, nextTick, watch, } from "vue";
import columns from "@/components/table/tableConfig/columnsName";
import virtualTable from "@/components/table/virtualTablePerssion.vue";
import permissionTable from "@/components/table/permissionTable.vue";
import request from "@/api/index";
import { getTableScroll } from "@/components/table/tableConfig/table";
import { useRoute } from "vue-router";
import getters from "@/store/getters";
// type
interface dataSourceType {
  [propName: string]: any;
}
//props
const props = defineProps({
  selectedOrgKeys: {
    type: [Number, String],
  },
});
//emit
const emit = defineEmits(["assignable"]);

// data
const { query } = useRoute();
const userInfo = getters.userInfo();
const permisssTab = ref();
const userName = ref(""); // 搜索用户名；
const checkStrictly = ref<Boolean>(true); //树型节点选择不关联
const isShowPagination = ref<Boolean>(true); //
const height = ref<number>(0);
//权限tab切换
const orgColumns = ref(columns.orgManageColumns);
const userColumns = ref(columns.userManageColumns);
const tabActive = ref<string | number>("1");
// 路由传来的userId
const querUserId = ref<string | number | any>("");
//组织数据
const isAssignable = ref<Boolean>(true);
let orgTreeTable = ref<dataSourceType[]>([]);
const orgTable = ref();

//栏目权限
const sectionValue = ref<string | undefined>("");

//组织列表数据
let scroll: dataSourceType = reactive({ y: "", isFixed: false }); // 表单滚动设置
const orgList = ref<dataSourceType[]>([]);
let userTreeTable = reactive<dataSourceType>({ total: 0, size: 10, records: [] });
const userTable = ref();

//文档权限
const documentValue = ref<string | undefined>(userInfo.siteId);

//methods

//改变权限内容tab切换
const changeTopTabs = (activeKey: number) => {
  tabActive.value = activeKey;
  getTreeData();
};

// 获取权限树数据、表格权限树数据
const getTreeData = async () => {
  // 获取表格数据
  if (tabActive.value == 1) {
    getOrgPower(); //权限树数据
  } else {
    getOrgList();
    getUserPower();
  }
};
// 获取组织权限列表
const getOrgPower = async () => {
  // orgTreeTable
  const postData: {} = {
    dataType: query.dataType,
    channelId: query.id,
  };
  const data = await request.fetchChannelDocumentOrgPerm(postData);
  let assignable = data.assignable;
  orgTreeTable.value = data || [];
  assignable = assignable && orgTreeTable.value.length;
  emit("assignable", assignable);
};
// 获取用户权限列表
const getOrgList = () => {
  request.fetchChannelDocumentOrgTree().then((res: any) => {
    orgList.value = [{ name: "全部", id: "" }].concat(res);
  });
};
const getUserPower = async (datas: dataSourceType = {}) => {
  // orgTreeTable
  const postData: {} = {
    dataType: query.dataType,
    channelId: query.id,
    pageNumber: datas.pageNumber || 1,
    orgId: sectionValue.value,
    pageSize: datas.pageSize || 10,
    userName: userName.value,
  };
  const data = await request.fetchChannelDocumentOrgUserPerm(postData);
  nextTick(() => {
    userTreeTable.total = data.total;
    userTreeTable.records =
      data.records?.map((item: dataSourceType) => {
        item.name = item.userName;
        item.id = item.userId;
        return item;
      }) || [];
    let assignable = userTreeTable.total;
    orgTreeTable.value = data || [];
    emit("assignable", assignable);

    let obj = getTableScroll(74, "permission-index", 150);
    scroll.y = obj.y;
    scroll.isFixed = false;
  });
};
//切换分页器
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  let datas: dataSourceType = {
    pageNumber: data.pageCurrent,
    pageSize: data.pageSize,
  };
  getUserPower(datas);
};

const handleChange = (value: string) => {
  // 站点变化
  nextTick(() => {
    getUserPower();
  });
};

//onmounted
onMounted(() => {
  height.value = window.innerHeight - 300;
  if (query.id) {
  } else if (query.userId) {
    querUserId.value = +query.userId;
  }
  query.dataType == "4"
    ? (orgColumns.value = columns.orgManageColumns) &&
    (userColumns.value = columns.userManageColumns)
    : (orgColumns.value = columns.DocOrgManageColumns) &&
    (userColumns.value = columns.DocUserManageColumns);

  getTreeData();
});
//defineExpose
defineExpose({
  permisssTab,
  tabActive,
  orgTable,
  userTable,
  getTreeData,
  sectionValue,
  documentValue,
});
</script>

<style lang="less" scoped>
.permission-index {
  padding-top: 10px;
  padding-left: 24px;
  height: 100%;
  .channelName {
  margin-bottom: 0;
  font-size: 15px;
  color: black;

  .user-l {
    color: #7f7f7f;
  }
}
  .add-site {
    display: flex;
    flex-direction: column;
    padding-top: 22px;
    padding-bottom: 8px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);

    .add-site-tip {
      margin-top: 4px;
      display: flex;
      flex-direction: row;
    }
  }

  .add-site-tip-top {
    padding-top: 22px;
    padding-bottom: 8px;
    display: flex;
    flex-direction: row;
  }

  .section-tab {
    height: 100%;

    .ant-select-single,
    .section-tab .ant-select-single {
      margin-top: 24px;
      min-width: 130px;
      margin-bottom: 24px;
    }
  }

  .userPermSeach {
    display: flex;
    justify-content: space-between;
    height: 80px;
    align-items: center;
  }
}
</style>
<style lang="scss">
.user-tab {
  .vxe-table--render-default .vxe-tree-cell {
    padding-left: 0;
  }

  .vxe-body--column .vxe-cell {
    padding-left: 0px;
  }

  .vxe-table--fixed-left-wrapper {
    width: 200px !important;
  }
}
</style>
